<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生作业列表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs">作业管理系统</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layui-this"><a href="javascript:;">我的作业</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-user"></i> ${student.name}
                    </a>
                </li>
            </ul>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" style="padding: 15px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-font-16">作业列表</span>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>作业标题</th>
                                <th>发布时间</th>
                                <th>截止时间</th>
                                <th>状态</th>
                                <th>成绩</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${assignments}" var="assignment">
                                <tr>
                                    <td>${assignment.title}</td>
                                    <td><fmt:formatDate value="${assignment.publishTime}" pattern="yyyy-MM-dd HH:mm"/></td>
                                    <td><fmt:formatDate value="${assignment.deadline}" pattern="yyyy-MM-dd HH:mm"/></td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${assignment.submitted}">
                                                <span class="layui-badge layui-bg-green">已提交</span>
                                            </c:when>
                                            <c:when test="${assignment.expired}">
                                                <span class="layui-badge">已过期</span>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="layui-badge layui-bg-orange">未提交</span>
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${not empty assignment.grade}">
                                                ${assignment.grade}
                                                <c:if test="${not empty assignment.comment}">
                                                    <i class="layui-icon layui-icon-about" style="cursor: pointer;" 
                                                       onclick="showComment('${assignment.comment}')"></i>
                                                </c:if>
                                            </c:when>
                                            <c:otherwise>-</c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm" onclick="viewAssignment(${assignment.aid})">
                                                <i class="layui-icon layui-icon-read"></i>查看
                                            </button>
                                            <c:if test="${not assignment.expired and not assignment.submitted}">
                                                <button class="layui-btn layui-btn-sm layui-btn-normal" 
                                                        onclick="submitAssignment(${assignment.aid})">
                                                    <i class="layui-icon layui-icon-upload-drag"></i>提交
                                                </button>
                                            </c:if>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 提交作业的表单 -->
    <div id="submitForm" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="submitForm">
            <input type="hidden" name="aid">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">作业内容</label>
                <div class="layui-input-block">
                    <textarea name="content" required lay-verify="required" class="layui-textarea" rows="10"></textarea>
                </div>
            </div>
        </form>
    </div>

    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer;
            var form = layui.form;
            
            form.on('submit(submitAssignment)', function(data){
                $.post('${pageContext.request.contextPath}/student/assignment/submit', data.field, function(res){
                    layer.msg('提交成功');
                    location.reload();
                });
                return false;
            });
        });
        
        function viewAssignment(aid) {
            window.location.href = '${pageContext.request.contextPath}/student/assignment/view?aid=' + aid;
        }
        
        function submitAssignment(aid) {
            layer.open({
                type: 1,
                title: '提交作业',
                area: ['600px', '500px'],
                content: $('#submitForm'),
                btn: ['提交', '取消'],
                yes: function(index, layero){
                    var form = layero.find('form');
                    form.find('input[name="aid"]').val(aid);
                    form.submit();
                }
            });
        }
        
        function showComment(comment) {
            layer.open({
                type: 1,
                title: '教师评语',
                area: ['400px', '300px'],
                content: '<div style="padding: 20px;">' + comment + '</div>'
            });
        }
    </script>
</body>
</html> 